
<template>
  <div>
    <el-button @click="uploadDialogVisible = true" type="primary">上传</el-button>
    <el-button @click="getFileList" type="primary">回到顶层</el-button>
  </div>

  <el-card style="margin-top: 10px">
    <el-table :data="tableData" style="width: 100%;">
      <el-table-column prop="date" label="Date" />
      <el-table-column prop="name" label="Name" width="500px">
        <template #default="scope">
          <span style="cursor: pointer;" @click="intoFolder(scope.row)">{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="size" label="Size" >
        <template #default="scope">
          {{scope.row.type !=='dir'? (scope.row.size/1024/1024).toFixed(2).toString()+"MB" : ''}}
        </template>
      </el-table-column>
      <el-table-column prop="type" label="Type" />
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="downloadFile(scope.row.name)">
            下载
          </el-button>
          <el-button link type="primary" size="small" @click="deleteFile(scope.row.name)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog
      v-model="uploadDialogVisible"
      title="文件上传"
      width="600"
      :before-close="handleClose"
      draggable
      overflow
      center
  >
    <el-upload
        class="upload-demo"
        drag
        action="http://localhost:7177/minio/upload"
        multiple
        :on-success="uploadSuccess"

    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        拖拽文件到这里或者 <em>点此选择文件</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          支持所有文件类型上传，不限速，不限大小
        </div>
      </template>
    </el-upload>
  </el-dialog>


</template>

<script>
  import axios from "axios";
  import {UploadFilled} from "@element-plus/icons-vue";
  import {ElMessage} from "element-plus";
  const baseUrl = "http://localhost:7177/"
  export default {
    components: {UploadFilled},
    data() {
      return {
        tableData:[],
        uploadDialogVisible:false,
      }
    },
    methods: {
      getFileList(){
        axios.get(baseUrl+"minio/list").then(res=>{

          if (res.data.code === 200){
            this.tableData = res.data.data
          }else {
            this.$message.error(res.data.msg)
          }

        })
      },
      downloadFile(fileName){
        axios.get(baseUrl+"minio/url?fileName="+fileName).then(response=>{
          console.log(response)
          // 创建一个a标签用于触发下载
          const link = document.createElement('a');
          link.href = response.data;
          document.body.appendChild(link);
          link.click();
          // 下载完成后移除a标签
          document.body.removeChild(link);
        })
      },
      deleteFile(fileName){
        axios.delete(baseUrl+"minio/delete?fileName="+fileName).then(res=>{
          console.log(res)

          let type;
          if (res.data.code === 200){
            type = 'success'
          }else {
            type = 'error'
          }
          ElMessage({
            message: res.data.msg,
            type: type,
          })
          this.getFileList();


        })
      },
      uploadSuccess(response, file, fileList){
        console.log(response)

        let type;
        if (response.code === 200){
          type = 'success'
        }else {
          type = 'error'
        }
        ElMessage({
            message: response.msg,
            type: type,
        })
        this.getFileList();

      },
      handleClose(){
        this.uploadDialogVisible =false
      },
      intoFolder(row){
        console.log(row)
        if (row.type === 'dir'){
          axios.get(baseUrl+"minio/folderList?folderName="+row.name).then(res=>{
            if (res.data.code === 200){
              this.tableData = res.data.data
            }
          })
        }
      },

    },
    mounted() {
      this.getFileList()
    }
  }

</script>

<style scoped>

</style>